import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { ImagePicker, ImagePickerOptions } from '@ionic-native/image-picker';
import { BaHttp } from '../../theme/baHttp/baHttp.service';
import { CasePage } from '../case/case';
@Component({
  selector: 'select-image',
  templateUrl: 'selectimage.html'
})

export class SelectImage {
  public isdisplay: boolean;
  tabBarElement: any;
  imagePaths: Array<string> = [];
  public profilePicture: string;
  constructor(
    public navCtrl: NavController,
    public navaparms: NavParams,
    public Camera: Camera,
    public _http: BaHttp,
    public imagePicker: ImagePicker
  ) {
    this.isdisplay = false;
    if (document.querySelector('.tabbar')) {
      this.tabBarElement = document.querySelector('.tabbar.show-tabbar');
    }
  }
  addImg() {
    this.isdisplay = true;
  }


  public Photo(): void {
    this.isdisplay = false;
    const options: CameraOptions = {
      quality: 100,                                            //相片质量0-100
      destinationType: this.Camera.DestinationType.DATA_URL,       //返回类型：DATA_URL= 0，返回作为 base64 編碼字串。 FILE_URI=1，返回影像档的 URI。NATIVE_URI=2，返回图像本机URI (例如，資產庫)
      sourceType: this.Camera.PictureSourceType.CAMERA,             //从哪里选择图片：PHOTOLIBRARY=0，相机拍照=1，SAVEDPHOTOALBUM=2。0和1其实都是本地图库
      allowEdit: false,                                        //在选择之前允许修改截图
      encodingType: this.Camera.EncodingType.JPEG,                   //保存的图片格式： JPEG = 0, PNG = 1
      targetWidth: 200,                                        //照片宽度
      targetHeight: 200,                                       //照片高度
      mediaType: this.Camera.MediaType.PICTURE,                                             //可选媒体类型：圖片=0，只允许选择图片將返回指定DestinationType的参数。 視頻格式=1，允许选择视频，最终返回 FILE_URI。ALLMEDIA= 2，允许所有媒体类型的选择。
      cameraDirection: 0,                                       //枪后摄像头类型：Back= 0,Front-facing = 1
      saveToPhotoAlbum: true
    }
    this.Camera.getPicture(options).then((imageData) => {
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.profilePicture = base64Image;
      this.imagePaths.push(base64Image);
    }, (err) => {

    })

  }
  public TackPhoto(): void {
    this.isdisplay = false;
    const options: ImagePickerOptions = {//options表示选取的图片参数
      maximumImagesCount: 5,//一次性最多只能选5张，iOS系统无效，Android上面有效
      width: 200,//图片的宽度
      height: 200,//图片的高度
      quality: 100,//图片的质量0-100之间选择
      outputType: 1 // default .FILE_URI返回影像档的，0表示FILE_URI返回影像档的也是默认的，1表示返回base64格式的图片
    }
    this.imagePicker.getPictures(options).then((results) => {
      if (results != "OK") {
        for (var i = 0; i < results.length; i++) {
          let base64Image = 'data:image/jpeg;base64,' + results[i];
          this.imagePaths.push(base64Image);
        }
        this.profilePicture = this.imagePaths[0];
      } else {
      }
    }, (err) => {
    })

  }
  ionViewWillEnter() {
    if (this.tabBarElement) {
      this.tabBarElement.style.display = 'none';
    }
  }

  ionViewWillLeave() {
    if (this.tabBarElement) {
      this.tabBarElement.style.display = 'flex';
    }
  }
  public imageCilck(data: string): void {
    this.profilePicture = data;
  }
  public deleteImage(data: string): void {
    for (var i = 0; i < this.imagePaths.length; i++) {
      if (this.imagePaths[i] == data) {
        this.imagePaths.splice(i, 1);
      }
    }
    this.profilePicture = this.imagePaths[0];
  }
  public send(): void {
    for (var i = 0; i < this.imagePaths.length; i++) {
      this._http.post('http://localhost:31173/upload/image', { data: this.imagePaths[i] }, (res) => {

      })
    }
  }
  public clone(): void {
    this.isdisplay = false;
  }
  public backWorkspace(): void {
    this.navCtrl.push(CasePage);
  }
}
